<template>
	<NavBar :isShowIcon="false" :isCentered="true" title="设备" />
	
	<view class="container">
		<view class="container-main">
			<view class="navigation_box">
				<view class="enter-box" @click="redirect('entry')">
					<view class="">
						<view class="title">
							设备进场
						</view>
						<view class="content">
							记录设备入场
						</view>
						<view class="type-in">
							录入
						</view>
					</view>
					<image src="/static/image 10@2x.png" mode="widthFix"></image>
				</view>
				<view class="enter-box refuel-box" @click="redirect('cheer')">
					<view class="">
						<view class="title">
							设备加油
						</view>
						<view class="content">
							记录设备加油
						</view>
						<view class="type-in refuel-type-in">
							录入
						</view>
					</view>
					<image src="/static/image 7@2x.png" mode="widthFix"></image>
				</view>
				
			</view>
			<view class="screen">
				<!-- <view class="box_top" :class="{'back_gauge':unfold}">
					<view class="select">
						<yh-select :data="projectOrder"  v-model="form.projectId" @change="changprojectId"></yh-select>
					</view>
					<view class="select">
						<yh-select :data="supplierOrder"  v-model="form.contractId" @change="changecontractId"></yh-select>
					</view>
				</view> -->
				<uv-drop-down
					ref="dropDown"
					sign="dropDown_1" 
					text-size="24rpx"
					text-active-color="#3c9cff"
					:extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }"
					:extra-active-icon="{ name: 'arrow-up-fill', color: '#3c9cff', size: '26rpx' }"
					
					:defaultValue="defaultValue" 
					:custom-style="{padding: '0 5rpx'}" 
					@click="selectMenu"
				>
					<uv-drop-down-item name="projectOrder" type="2" :label="dropItem('projectOrder').label"
					    :value="dropItem('projectOrder').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="supplierOrder" type="2" :label="dropItem('supplierOrder').label"
					    :value="dropItem('supplierOrder').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<uv-drop-down-popup 
					sign="dropDown_1" 
					:click-overlay-on-close="true"
					:currentDropItem="currentDropItem" 
					@clickItem="clickItem"
					@popupChange="change"
				></uv-drop-down-popup>
				
			</view>
			<scroll-view scroll-y="true" refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' @scrolltolower="scrolltolower" class="list" :class="{'listscroll':unfold}">
				<uv-empty mode="data" text="暂无数据" v-if="equipmentList.length==0 && isempty" ></uv-empty>
				<view class="equipment-item" v-for="(item, index) in equipmentList" :key="item.id" >
				 <!-- <view class="status-tag" :class="item.status==1?'out':'in'">
				    {{ item.status==1?'已领用':'未领用' }}
				  </view> -->
				  <view class="item-header">
				    <view class="left-section">
						<view class="status-tag" :class="item.status==1?'out':'in'">
						  {{ item.status==1?'已领用':'未领用' }}
						</view>
				      <text class="equipment-title">{{ item.name }}</text>
					  <text class="division">|</text>
				      <!-- <text class="equipment-id">{{ item.code }}</text> -->
					  <!-- <view class="equipment-id">
						  
					  </view> -->
					  <l-popover placement="bottom-left" :content="item.code">
					      <view class="equipment-id" type="primary">{{item.code}}</view>
					  </l-popover>
					  
					   
				    </view>
				<!--    <view class="status-tag" :class="item.status==1?'out':'in'">
				      {{ item.status==1?'已领用':'未领用' }}
				    </view> -->
				  </view>
				  
				  <!-- <image class="equipment-image" src="/static/sb_image1.png" mode="widthFix"></image> -->
				  
				  <view class="info-section">
				    <!-- 位置信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="map-fill"></uv-icon> -->
				      <view class="info-text">供应商</view>
				      <view class="info-content">{{item.supplierName}}</view>
				    </view>
				    
				    <!-- 时间信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="clock"></uv-icon> -->
				      <view class="info-text">台班单价</view>
					  <view class="info-content">{{item.unitPrice}}</view>
				    </view>
				    
				    <!-- 司机信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="account"></uv-icon> -->
				      <view class="info-text">台班单位</view>
					  <view class="info-content">{{item.unit}}</view>
				    </view>
				  </view>
				  
				  <!-- 操作按钮 -->
				  <view class="action-buttons">
					
					<view class="action-btn fuel-btn" @click.stop="refuelfacilitydraw(item)">
						领用记录
					</view>
					<view class="action-btn fuel-btn" v-show="item.status==2" @click.stop="outClick(item)">
						立即领用
					</view>
					<view @click.stop="redirectow(item)" class="action-btn metering fuel-btn" v-show="item.status==1" :class="item.status.type === 'out' ? 'in-btn' : 'out-btn'">
					  计量
					</view>
					<view class="action-btn fuel-btn" v-show="item.status==1" @click.stop="sendback(item)">
						退还
					</view>
				  </view>
				</view>
			</scroll-view>
		</view>
	</view>
	<uv-overlay :show="show" @click="cancel">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="rect-box">
					<view class="box-title">
						领用单位
					</view>
					<view class="box-content " :class="{'select-text':contractName}" @click="receiveUlit">
						<uv-text v-show="!contractName" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
						<text v-show="contractName">{{contractName}}</text>
					</view>
				</view>
				<view class="img-box">
					<view class="title-box">
						附件
					</view>
					<view class="img-list">
						<view class="imgfile-box" >
							<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
								<image  class="imgfile" :src="item" mode="scaleToFill"></image>
								<view class="deletable" @click="deletePic(index)">
									<uv-icon name="close" size="10px" color="#fff"></uv-icon>
								</view>
							</view>
							
							<view v-show="imgFile.length<5" class="plus-icon" @click="chooseImage">
								<uv-icon name="plus"></uv-icon>
							</view>
						</view>
						
					</view>
				</view>
				<view class="rect_but">
					<view class="cancel but" @click="cancel">
						取消
					</view>
					<view class="confirm but" @click="confirm">
						确定
					</view>
					
				</view>
			</view>
		</view>
	</uv-overlay>
	<view v-if="isShow" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker()"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker()">取消</text>
	      <text class="picker-title">选择使用单位</text>
	      <text class="picker-confirm" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view  class="picker-item" v-for="(item, index) in unitList" v-show="item.parentId!==0" :key="index" 
	            :class="{ 'selected': unit === item.id }"
	            @click="selectOutOption(item)">
	        <text>{{ item.contractName }}</text>
	      </view>
		  <view class="black-box">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
	<uv-modal ref="modal" title="警告" :content=content :showCancelButton=true  :asyncClose="true" @confirm="confirmdrawId"></uv-modal>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { BASEURL } from '@/utils/request.js'
	import yhSelect from "@/components/yh-select/yh-select.vue"
	import {
	    getmaterialSingle,
	    getProjectList,
	    getsupplier,
		queryByParam,
		getqueryByParam,
		getSbmanageList,
		facilitydraw,
		facilitydrawth
	} from '@/utils/app.js'
	export default {
		components: { NavBar,yhSelect },
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				isempty:false,
				refresh:false,
				show:false,
				selectVal1:'',
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [],
				activeName: 'projectOrder',
				projectOrder: {
				    label: '项目',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: [{
				        label: '综合排序',
				        value: 'all'
				    }]
				},
				supplierOrder: {
				    label: '合同',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: []
				},
				form:{
					projectId:'',
					contractId:''
				},
				equipmentList:[],
				categoryOrder:[],
				pageNum:1,
				facilityId:'',
				contractId:'',
				unitList:[],
				tempFile:[],
				maxNum:5,
				imgFile:[],
				imgList:[],
				isShow:false,
				unit:'',
				contractName:'',
				parms:{},
				unfold:false,
				total:'',
				content:'',
				drawId:''
			};
		},
		onLoad(){
			// this.getProjectData()
		},
		onShow() {
			this.pageNum = 1
				this.equipmentList = []
			//      this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			this.getProjectData()
		},
		methods:{
			change(e) {
				console.log('弹窗打开状态：',e);
			},
			async refresherrefresh(){
				this.refresh= true
				this.pageNum = 1
				this.equipmentList = []
				await this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
				this.refresh = false
			},
			sendback(e){
					console.log(e);
					this.content = `是否确认退还设备编号为"${e.code}"的设备?退还后该设备不可计量`
					this.$refs.modal.open();
					this.drawId = e.drawId
				
			},
			confirmdrawId(){
				facilitydrawth(this.drawId).then(res=>{
					console.log(res);
					this.equipmentList = []
					this.getSbmanageLists({...this.form,pageSize:20,pageNum:1})
					this.$refs.modal.close();
				})
			},
			//删除附件
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			redirectow(item){
				console.log(item);
				uni.navigateTo({
					url:`/pages/equipment/add/index?projectId=${item.projectId}&contractId=${item.drawContractId}&sourceId=${item.id}&recordId=${item.drawId}&unit=${item.unit}`
				})
			},
			scrolltolower(){
				if(this.equipmentList.length>=this.total) return
				// console.log('111111 ');
				this.pageNum++
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			redirect(path) {
				if(path=='cheer'){
					uni.navigateTo({
					    url: `/pages/equipment/list/list?isCheer=`+true
					})
					return
				}
				if(path==='entry'){
					uni.navigateTo({
					    url: `/pages/equipment/${path}/index?projectId=`+this.form.projectId
					})
					return
				}
				if(path=='out'){
					uni.navigateTo({
					    url: `/pages/equipment/list/index?option=`+'出场'
					})
					return
				}
			    uni.navigateTo({
			        url: `/pages/equipment/${path}/index`
			    })
			},
			// changprojectId(e){
			// 	this.pageNum = 1
			// 	this.categoryOrder = []
			// 	this.form.materialGenreId = ''
			// 	this.form.projectId = e.value
			// 	this.equipmentList=[]
			// 	this.queryByParamList({projectId:e.value,parentId:0})
			// 	// this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			// },
			changecontractId(e){
				this.pageNum = 1
				this.form.contractId = e.value
				this.equipmentList=[]
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			changematerialGenreId(e){
				this.form.materialGenreId = e.value
				this.equipmentList=[]
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			changestatus(e){
				this.form.status = e.value
				this.equipmentList=[]
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			add(){
				uni.navigateTo({
					url:'/pages/equipment/list/index'
				})
			},
			//获取项目列表
			getProjectData() {
			    getProjectList().then(res => {
			        if (res && res.code == 200) {
			            const data = res.rows.map(item => ({
			                label: item.projectName || item.name,
			                value: item.id
			            }));
						this.projectOrder.child=data
						this.form.projectId = data[0].value
						const findIndex = this.result.findIndex(item => item.name == 'projectOrder');
						// 已经存在筛选项
						if (findIndex > -1) {
							console.log(11223344);
							this.$set(this.result, findIndex, {
								name: 'projectOrder',
								label:data[0]?data[0].label:'',
								value:data[0]?data[0].value:''
							})
						} else {
							this.result.push({
								name: 'projectOrder',
								label:data[0]?data[0].label:'',
								value:data[0]?data[0].value:''
							});
						}
						// this.projectId=data[0].value
						this.queryByParamList({projectId:data[0].value,parentId:0})
						
			        }
			    })
			},
			// 合同
			queryByParamList(e){
				queryByParam(e).then(res=>{
					const data = res.data.map(item => ({
					    label: item.contractName,
					    value: item.id
					}));
					
					this.supplierOrder.child = data
					const findIndex = this.result.findIndex(item => item.name == 'supplierOrder');
					// 已经存在筛选项
					if (findIndex > -1) {
						console.log(11223344);
						this.$set(this.result, findIndex, {
							name: 'supplierOrder',
							label:data[0]?data[0].label:'',
							value:data[0]?data[0].value:''
						})
					} else {
						this.result.push({
							name: 'supplierOrder',
							label:data[0]?data[0].label:'',
							value:data[0]?data[0].value:''
						});
					}
					// this.cooperationValue = res.data[0].id
					this.form.contractId = data[0].value
					// this.getCountByGenreIdLists({projectId:this.form.projectId})
					this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum,})
				})
			},
			// 设备类别
			// getCountByGenreIdLists(data){
			// 	getqueryByParam(data).then(res=>{
			// 		console.log(res,'设备类别');
			// 		if(res.code==200){
			// 			const dataArr =res.data.map(item=>({
			// 				value:item.id,
			// 				label:item.name
			// 			}))
			// 			this.categoryOrder=[{value:null,
			// 				label:'全选'},...dataArr]
			// 			const objstatus = {}
			// 			if(this.isCheer){
			// 				// 判断是否从列表的加油进入
			// 				objstatus.status = 1
			// 			}
			// 			this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum,...objstatus})
			// 		}
			// 	})
			// },
			// 获取设备列表
			getSbmanageLists(data){
				// 显示加载提示
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getSbmanageList(data).then(res=>{
					// 隐藏加载提示
					uni.hideLoading();
					console.log(res);
					if(res.code==200){
						this.total = res.total
						this.equipmentList = [...this.equipmentList,...res.rows]
						if(this.equipmentList.length==0){
							this.isempty = true
						}else{
							this.isempty = false
						}
					}
				})
			},
			refuelfacilitydraw(data){
				uni.navigateTo({
					url:`/pages/equipment/receive/index?facilityId=${data.id}`
				})
			},
			outClick(e){
				// this.show=true
				console.log(e);
				uni.navigateTo({
					url:`/pages/facility/receive?facilityId=${e.id}&projectId=${e.projectId}`
				})
				// this.facilityId=e.id
				// this.contractId = e.contractId
				// queryByParam({projectId:e.projectId}).then(res=>{
				// 	this.unitList=res.data
				// 	// this.isShow = true
				// 	console.log(res);
				// })
			},
			confirm(){
				if(!this.contractName){
					uni.showToast({
					  title: '请选择领用单位',
					  icon: 'none'
					});
					return
				}
				console.log(this.imgList.join(','));
				facilitydraw({...this.parms,attachmentUrl:this.imgList.join(','),type:1}).then(res=>{
					if(res.code==200){
						uni.showToast({
						  title: '成功',
						  icon: 'none'
						});
						this.pageNum = 1
						this.equipmentList = []
						this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
					}
					 
				})
				console.log(this.dataList);
				
				this.cancel()
			},
			cancel(){
				this.show = false
				this.tempFile = [],
				this.maxNum = 5,
				this.imgFile = [],
				this.imgList = [],
				this.contractName=''
				this.unit = ''
			},
			receiveUlit(){
				this.isShow=true
			},
			closeOutPicker(e) {
			  this.isShow = false;
			},
			confirmOut(){
				this.isShow = false;
				console.log(this.parms,this.arrParms);
			},
			selectOutOption(data) {
				console.log(data);
				this.unit = data.id
				this.contractName = data.contractName
					
				const obj = {
					facilityId:this.facilityId,
					projectId:data.projectId,
					contractId:data.id
				}
				this.parms=obj
			},
			// 选择图片
			chooseImage(i) {
				if(this.actionIndex==1){
					this.imgFile = [...this.imgListTwo[i.id]]
				}
			    const that = this
			    uni.chooseImage({
			        count: this.maxNum, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        success: async (res) => {
			            that.tempFile = [...res.tempFilePaths]
			            const token = uni.getStorageSync("token");
			            that.tempFile.forEach(item => {
			                // #ifdef APP-PLUS
			                if (item.split(':')[0] != 'file') {
			                    let p = plus.io.convertLocalFileSystemURL(item);
			                    that.imgFile.push('file://' + p)
			                    uni.uploadFile({
			                        url: `${BASEURL}/common/upload`,
			                        filePath: 'file://' + p,
			                        header: {
			                            'Authorization': token,
			                        },
			                        name: 'file',
			                        success: (uploadFileRes) => {
										if(this.actionIndex==1){
											this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
											// this.imgListTwo.push(JSON.parse(uploadFileRes.data).annexUrl)
										}else{
											this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
										}
			                            // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
			                            // 获取上传服务器的地址 
			                        }
			                    });
			                } else {
			                    that.imgFile.push(item)
			                    uni.uploadFile({
			                        url: `${BASEURL}/common/upload`,
			                        filePath: item,
			                        header: {
			                            'Authorization': token,
			                        },
			                        name: 'file',
			                        success: (uploadFileRes) => {
			                            // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
			                            // 获取上传服务器的地址
										if(this.actionIndex==1){
											// this.materialList.forEach(item => {
											
											    this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
											// });
										}else{
											this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
										}
			                        }
			                    });
			                }
			                // #endif
			
			                // #ifdef H5
			                that.imgFile.push(item)
			
			                uni.uploadFile({
			                    url: `${BASEURL}/common/upload`,
			                    filePath: item,
			                    header: {
			                        'Authorization': token,
			                    },
			                    name: 'file',
			                    success: (uploadFileRes) => {
			                        // this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
									if(this.actionIndex==1){
										// this.materialList.forEach(item => {
											// if(Object.keys(this.imgListTwo).includes(i.id)){
												// if(!this.myObject[i.id]){
													// this.$set(this.imgListTwo, i.id, []);
												// }
												
											// }
										     this.imgListTwo[i.id] = [...this.imgListTwo[i.id],JSON.parse(uploadFileRes.data).annexUrl]
										// });
									}else{
										this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
									}
			                        // 获取上传服务器的地址
			                    }
			                });
			                // #endif
			
			            })
			
			        }
			    });
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				console.log(findIndex);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				console.log(this.result);
				const data = {
					materialGenreId:'',
					contractId:'',
					projectId:'',
					status:''
				}
				const arr = [...this.result]
				console.log(arr);
				arr.forEach(item=>{
					const obj = {...item}
					console.log(obj);
					if(obj.name=='supplierOrder'){
						this.form.contractId=obj.value
					}
					if(obj.name=='projectOrder'){
						this.form.projectId=obj.value
						
						this.queryByParamList({projectId:obj.value,parentId:0})
					}
				})
				// this.dataList=data
				this.pageNum=1
				this.equipmentList = []
				// this.getSbmanageLists({...this.dataList,pageNum:this.pageNum,pageSize:20})
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	:deep(.uv-dp__container) {
	    max-height: 40vh !important;   /* 使用视口单位更可靠 */
	    overflow-y: auto !important;
	    color: #F53F3F !important;
	    scrollbar-width: thin;         /* 添加滚动条样式 */
	    // scrollbar-color: #F53F3F #f5f5f5; /* 滚动条颜色 */
	}
	::v-deep.uv-text__value.uv-line-1{
		 max-width: 300rpx !important;
		 }
	:deep(.uv-drop-down) {
	    background-color: #f6f7f9;
	    border-bottom: none;
	}
	.container{
		background-color: #f6f7f9;
	}
	
	.navigation_box{
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-between;
		// height: 300rpx;
		margin-bottom: 20rpx;
		background-color: #FFF;
		.enter-box{
			width: 324rpx;
			height: 180rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			background-color: #fef0ef;
			border-radius: 8rpx;
			image{
				width: 100rpx;
			}
			.title{
				font-weight: bold;
			}
			.content{
				color: #acb0ba;
				font-size: 28rpx;
			}
			.type-in{
				width: 100rpx;
				// padding: 10rpx 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #ffd9d8;
				border-radius: 6rpx;
				color: #e26d55;
			}
		}
		.refuel-box{
			background-color: #f2f5ff;
			.refuel-type-in{
				background-color: #d9e5ff;
				color: #5075dc;
			}
		}
	}
.screen{
	// padding: 0 20rpx;
	// padding-top: 40rpx;
	background-color: #f6f7f9;
	.box_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.back_gauge{
		margin-bottom: 10rpx;
	}
	.box-bottom{
		display: flex;
		.select-right{
			// margin-right: 20rpx;
		}
	}
	.select{
		width: 340rpx;
		margin-right: 5rpx;
	}
	
	.unfold{
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
}
.list{
	padding-top: 20rpx;
	height: calc(100vh - 560rpx);
	background-color: #fff;
}
.listscroll{
 height: calc(100vh - 620rpx);	
}
.equipment-item{
		position: relative;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		// padding: 24rpx 16rpx 24rpx 30rpx;
		padding: 24rpx 0;
		background-color: #fff;
		// border: 2rpx solid #d6dde8;
		// border-radius: 32rpx;
		// box-shadow: 1px 0px 2px 1px rgba(0, 0, 0, 0.05);
		.status-tag{
			// position: absolute;
			// right: 0;
			// top: 0;
			margin-right: 20rpx;
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #fc913e;
			// border-radius: 40rpx;
			border-top-right-radius: 8rpx;
			border-bottom-left-radius: 8rpx;
		}
		.in{
			background-color: #18cc3a;
			// color: #00B42A;
		}
		.item-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-section{
				display: flex;
				align-items: center;
				flex: 1;
			}
			.equipment-title{
				max-width: 300rpx;
				// margin-right: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				overflow: hidden;
				 text-overflow: ellipsis;
				 white-space: nowrap;
			}
			.division{
				padding: 0 10rpx;
			}
			.equipment-id{
				width: 200rpx;
				font-size: 30rpx;
				 overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
			}
			// .status-tag{
			// 	width: 100rpx;
			// 	height: 40rpx;
			// 	text-align: center;
			// 	line-height: 40rpx;
			// 	font-size: 24rpx;
			// 	color: #F53F3F;
			// 	background-color: #FFECE8;
			// 	// border-radius: 40rpx;
			// }
			// .in{
			// 	background-color: #E8FFEA;
			// 	color: #00B42A;
			// }
			
		}
		.equipment-image{
				width: 440rpx;
				margin: 28rpx 104rpx;
			}
			.info-section{
				.info-row{
					height: 48rpx;
					display: flex;
					align-items: center;
				}
				.circle-icon{
					width: 32rpx;
					margin-left: 40rpx;
				}
				.info-text{
					// flex: 1;
					margin-right: 20rpx;
					width: 120rpx;
					font-size: 30rpx;
					font-weight: normal;
					color: #72767C;
					text-align-last: justify;
					// margin-left: 8rpx;
				}
				.info-content{
					
					width: 492rpx;
					white-space:nowrap;       /* 使文本不可换行 */
					    overflow:hidden;          /* 隐藏溢出部分 */ 
					    text-overflow:ellipsis; 
					font-size: 30rpx;
				}
			}
		}
		.action-buttons{
			margin-top: 10rpx;
			display: flex;
			justify-content: right;
			.action-btn{
				// width: 124rpx;
				padding: 0 20rpx;
				height: 66rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 66rpx;
				border-radius: 12rpx;
				color: #39C75A;
				background-color: #E8FFEA;
			}
			.fuel-btn{
				margin-right: 20rpx;
				// width: 184rpx;
				color: #165DFF;
				background-color: #E8F3FF;
			}
			.draw{
				width: 170rpx;
			}
			.metering{
				margin-right: 20rpx;
			}
			.in-btn{
				background-color: #FFECE8;
				color: #F53F3F;
			}
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		
		.rect {
			width: 600rpx;
			height: 400rpx;
			padding: 40rpx 10rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.rect_but{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
			}
			.but{
				font-size: 28rpx;
				width: 144rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 6rpx;
				background-color: #E8F3FF;
			}
			.rect-box{
				display: flex;
				font-size: 30rpx;
				
				.box-content{
					flex: 1;
					margin-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #808080;
				}
				.select-text{
					color: #000000;
				}
			}
			.img-box{
				
				.title-box{
					font-size: 30rpx !important;
				}
				.img-list{
					display: flex;
					.imgfile-box{
						display: flex;
						
					}
				}
				.imgfile{
					height: 100rpx;
					width: 100rpx;
					margin-right: 8rpx;
				}
				.wrap__preview{
					position: relative;
				}
				.deletable{
					position: absolute;
					top: 0;
					right: 0;
					width: 28rpx;
					height: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom-left-radius: 100px;
					background-color: #373737;
				}
				.plus-icon{
					width: 100rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #E6EAF3;
					border-radius: 10rpx;
				}
			}
		}
	}
	/* 修改底部弹出层部分 */
		.picker-container {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  top: 0;
		  z-index: 11000;
		}
		
		.picker-mask {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.4);
		}
		
		.picker-content {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 500rpx;
		  background-color: #FFFFFF;
		  border-top-left-radius: 16px;
		  border-top-right-radius: 16px;
		}
		
		.picker-header {
		  display: flex;
		  height: 53px;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 16px;
		  border-bottom-width: 1px;
		  border-bottom-color: #EEF2F9;
		  margin-bottom: 30rpx;
		}
		
		.picker-title {
		  font-size: 16px;
		  color: #1D2129;
		  font-weight: 400;
		}
		
		.picker-cancel, .picker-confirm {
		  font-size: 16px;
		}
		
		.picker-cancel {
		  color: #86909C;
		}
		
		.picker-confirm {
		  color: #165DFF;
		}
		
		.picker-list {
		  padding: 24rpx 0;
		  max-height: 350rpx;
		  /* overflow: scroll; */
		}
		
		.picker-item {
			display: flex;
		  height: 44px;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
		  padding: 0 16px;
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.selected{
			background-color: #E8F3FF;
		}
		.black-box{
			height: 50rpx;
		}
		.picker-item text {
		  font-size: 16px;
		  color: #1D2129;
		}
</style>
